<template> 
  <div class="create-class-page">
    <a-steps :current="currentStep" class="steps">
      <a-step title="创建班级" />
      <a-step title="添加学生" />
    </a-steps>

    <div v-if="currentStep === 0" class="step-content">
      <a-card class="class-card">
        <div class="input-container">
          <span class="label mr-2 font-bold">选择年级</span>
          <a-select
            v-model:value="selectedGrade"
            @change="handleGradeChange"
            placeholder="选择年级"
            :status="classErrors.grade ? 'error' : ''"
            :class="{ 'active-input': focusedGrade }"
            @focus="focusedGrade = true"
            @blur="focusedGrade = false"
            
          >
            <a-select-option
              v-for="(grade, index) in gradeOptions"
              :key="index"
              :value="grade.value"
            >
              {{ grade.label }}
            </a-select-option>
          </a-select>
          <div v-if="classErrors.grade" class="error-message">请选择年级</div>
        </div>

        <div class="input-container">
          <a-input
            v-model:value="className"
            @focus="focusedClassName = true"
            @blur="focusedClassName = false"
            :class="{ 'active-input': focusedClassName }"
            :status="classErrors.class_name ? 'error' : ''"
            @input="handleClassNameInput"
            maxlength="20"
            autofocus
          />
          <label
            :class="{ active: focusedClassName }"
            v-if="focusedClassName && !className"
          >
            班级名称
          </label>
          <div v-if="classErrors.class_name" class="error-message">
            请输入班级名称
          </div>
        </div>

        <div v-if="showClassTags" class="class-tags">
          <a-tag
            v-for="(tag, index) in classTags"
            :key="tag"
            @click="selectClassTag(tag)"
            :color="tagColors[index % tagColors.length]"
            class="class-tag cursor-pointer"
          >
            {{ tag }}
          </a-tag>
        </div>

        <div class="form-buttons">
          <a-button type="default" @click="handleCancel">返回</a-button>
          <a-button type="primary" @click="handleCreateClass">创建</a-button>
        </div>
      </a-card>
    </div>

    <div v-else-if="currentStep === 1" class="step-content">
      <a-result
        status="success"
        title="创建成功!"
        :sub-title="`为 ${createdClass.class_name} 班级添加学生`"
        class="result"
      >
        <WarningFilled v-if="classErrors.class_no" class="warning-icon" />
        <template #extra>
          <a-button type="primary" size="large" @click="goToClass">去添加学生</a-button>
        </template>
      </a-result>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { mapLevelToCNName } from "@/utils/mapLevel";
import { useClassStore } from "@/stores/class";

const classStore = useClassStore();
const router = useRouter();
const currentStep = ref(0);
const className = ref("");

const gradeOptions = [
  ...Array.from({ length: 12 }, (_, i) => ({
    value: i + 1,
    label: mapLevelToCNName(i + 1)
  })),
  { value: 0, label: "其他" } 
];
const selectedGrade = ref(1); 
const classErrors = reactive({
  class_name: false,
  grade: false,
});
const createdClass = reactive({
  id: null,
  class_name: "",
  class_no: "",
  grade: ""
});

const focusedClassName = ref(false);
const focusedGrade = ref(false);

const showClassTags = computed(() => selectedGrade.value !== null && selectedGrade.value !== 0);

const tagColors = [
  "blue",
  "green",
  "orange",
  "red",
  "purple",
  "cyan",
  "magenta",
  "gold",
  "lime",
  "volcano"
];

const classTags = computed(() => {
  if (!selectedGrade.value || selectedGrade.value === 0) return [];
  const gradeLabel = gradeOptions.find(g => g.value === selectedGrade.value)?.label || selectedGrade.value;
  return Array.from({ length: 6 }, (_, i) => `${gradeLabel}${i + 1}班`);
});

const handleClassNameInput = () => {
  classErrors.class_name = className.value.trim().length === 0;
};

const handleGradeChange = () => {
  classErrors.grade = selectedGrade.value === null;
};

const selectClassTag = (tag) => {
  className.value = tag;
  classErrors.class_name = false;
};

const handleCreateClass = async () => {
  classErrors.class_name = !className.value.trim();
  classErrors.grade = selectedGrade.value === null;

  if (classErrors.class_name || classErrors.grade) {
    return;
  }

  try {
    const classData = {
      class_name: className.value,
      grade: selectedGrade.value,
    };

    const response = await window.electronAPI.saveClassData(classData);
    if (response.success) {
      createdClass.id = response.classData.id;
      createdClass.class_name = response.classData.class_name;
      createdClass.class_no = response.classData.class_no;
      createdClass.grade = response.classData.grade;
      message.success("班级创建成功!");
      classStore.selectClass({
        class_no: createdClass.class_no,
        class_name: createdClass.class_name
      })
      currentStep.value = 1;
    } else {
      message.error("创建班级失败: " + response.message);
    }
  } catch (error) {
    message.error("创建班级失败: " + error.message);
  }
};

const handleCancel = () => {
  router.go(-1);
};

const goToClass = () => {
  router.push(`/class/${createdClass.class_no}/${createdClass.class_name}`)
}
</script>

<style scoped lang="less">
.create-class-page {
  padding: 40px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    z-index: -1;
  }
}

.steps {
  max-width: 800px;
  margin: 0 auto 40px auto;

  .ant-steps-item-title {
    font-size: 16px;
    font-weight: bold;
  }

  .ant-steps-item-active .ant-steps-item-title {
    color: #1890ff;
  }

  .ant-steps-item-finish .ant-steps-item-title {
    color: #52c41a;
  }
  
}

.step-content {
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 0 auto;
}

.class-card,
.student-card {
  background: rgba(222, 222, 222, 0);
  border-radius: 12px;
  padding: 24px;
}

.input-container {
  margin-bottom: 16px;
  position: relative;

  label {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease;
  }

  .warning-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #ff4d4f;
  }

  .error-message {
    margin-top: 4px;
    font-size: 12px;
    color: #ff4d4f;
  }
}

.form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 24px;

  .ant-btn {
    padding: 0 24px;
    height: 40px;
    border-radius: 20px;
  }
}

.success-icon {
  font-size: 40px;
  color: #52c41a;
}

.result {
  margin-bottom: 24px;

  .ant-result-title {
    font-size: 24px;
    font-weight: bold;
  }

  .ant-result-subtitle {
    font-size: 16px;
    color: #555;
  }
 
}
/deep/:where(.css-dev-only-do-not-override-s6hmb).ant-result .ant-result-content {
    display: none;
}
</style>
